<template>
  <div id="cesiumContainer">
    <basePopup ref="basePopup" @showlist="showlist" @dclose="dclose" :maptype="maptype"></basePopup>
    <!-- <popup ref="popup" :type="3" @showlist="showlist" @dclose="dclose"></popup> -->
    <div class="container">
      <!-- 应急调度 -->
      <div class="rightInfo" v-if="showMenu === 'dd' || showMenu === 'dd-setting' || showMenu === 'dd-exper'" style="width:549px;">
        <!-- 设置受灾点 -->
        <dispatch
          v-if="showMenu === 'dd-setting' || showMenu === 'dd'"
          :showmenu="showMenu"
          @getlist="getInfoPoint($event, 'yjtdJYDW')"
          @getlist1="getInfoPoint($event, 'popwzd')"
          @getlist2="getInfoPoint($event, 'popbzd')"
          :displaytype="type"
          @setName="dd"
          @setCoordinatesearch="setCoordinatesearch"
          @drawshape="drawshape"
          :Boxselection="Boxselection"
          @switchtab="switchtab"
          @pointremove="dclose"
          @Getfocus="clearShape"
          @drawRoute="drawRoute"
          @reomvePointRange="reomvePointRange"
          @rangeSearch="rangeSearch"
        ></dispatch>
        <!-- 专家库 -->
        <experdatabase v-if="showMenu === 'dd-exper'"></experdatabase>
      </div>
      <!-- ***************************************************** 应急资源 -->
      <!-- 首页 -->
      <div class="rightInfo" v-if="showMenu === 'zy-fzrlld' || showMenu === 'zy-bzazd' || showMenu === 'zy-jydw' || showMenu === 'zy-yjwzd' || showMenu === 'zy'">
        <chartRigth></chartRigth>
      </div>
      <!-- 专家组 -->
      <div class="centerInfo" v-if="showMenu === 'zy-zjz'">
        <centerTableZjz @close="close"></centerTableZjz>
      </div>
      <!-- 通讯录 -->
      <div class="centerInfo" v-if="showMenu === 'zy-txl'">
        <centerTableTxl @close="close"></centerTableTxl>
      </div>
      <transition name="fadeLeft">
        <!-- 负责人联络点 -->
        <div class="leftInfo">
          <tabLeftFzrlld
            v-if="showMenu === 'zy-fzrlld-xz' || showMenu === 'zy-fzrlld-cq'"
            @getlist="getInfoPoint($event, 'yjzyXZJD')"
            :type="showMenu"
            @close="close"
            @trdblclick="trdblclick"
          ></tabLeftFzrlld>
          <!-- 避灾安置点 -->
          <tabLeftBzazd v-if="showMenu === 'zy-bzazd'" @getlist="getInfoPoint($event, 'yjzyAZD')" @close="close" @trdblclick="trdblclick"></tabLeftBzazd>
          <!-- 救援队伍 -->
          <tabLeftJydw v-if="showMenu === 'zy-jydw'" @getlist="getInfoPoint($event, 'yjzyJYDW')" @close="close" @trdblclick="trdblclick"></tabLeftJydw>
          <!-- 应急物资点 -->
          <tabLeftYjwzd
            v-if="showMenu.search('zy-yjwzd') !== -1 && showMenu !== 'zy-yjwzd'"
            @getlist="getInfoPoint($event, 'yjzyWZD')"
            :type="showMenu"
            @close="close"
            @trdblclick="trdblclick"
          ></tabLeftYjwzd>
        </div>
      </transition>
      <!-- 应急响应 -->
      <div class="centerInfo" v-if="showMenu === 'xy'" style="overflow-y: auto">
        <response></response>
      </div>
      <!-- 当前时间 -->
      <div class="date" v-if="showMenu === 'xy' && this.theme !== 'dark' ? false : true">
        <div class="content">{{ nowDate }}</div>
      </div>
      <div class="statistics" v-if="showMenu === 'xy' && this.theme !== 'dark' ? false : true">
        <!-- 应急物资 -->
        <div class="item">
          <div class="item-icon">
            <img src="../../assets/images/tj_yjwz.png" alt="" v-if="this.theme === 'dark'" />
            <img class="tj_yjwz2" src="../../assets/images/tj_yjwz2.png" alt="" v-else />
          </div>
          <div class="item-title">{{ dataStatistics.emergencySuppliesPointTotal }}</div>
        </div>
        <!-- 安置点 -->
        <div class="item">
          <div class="item-icon">
            <img src="../../assets/images/tj_azd.png" alt="" v-if="this.theme === 'dark'" />
            <img class="tj_yjwz2" src="../../assets/images/tj_azd2.png" alt="" v-else />
          </div>
          <div class="item-title">{{ dataStatistics.settlementPointTotal }}</div>
        </div>
        <!-- 救援队伍 -->
        <div class="item">
          <div class="item-icon">
            <img src="../../assets/images/tj_jydw.png" alt="" v-if="this.theme === 'dark'" />
            <img class="tj_yjwz2" src="../../assets/images/tj_jydw2.png" alt="" v-else />
          </div>
          <div class="item-title">{{ dataStatistics.rescueTeamTotal }}</div>
        </div>
        <!-- 联络点 -->
        <div class="item">
          <div class="item-icon">
            <img src="../../assets/images/tj_lld.png" alt="" v-if="this.theme === 'dark'" />
            <img class="tj_yjwz2" src="../../assets/images/tj_lld2.png" alt="" v-else />
          </div>
          <div class="item-title">{{ dataStatistics.linkmanPointTotal }}</div>
        </div>
      </div>
      <!-- 标题logo -->
      <div class="searchNav" style="z-index: 999">
        <div class="titleInfo" v-if="themeMap == 'map1'">
          <img src="../../assets/images/title.png" />
        </div>
        <div class="titleInfoTwo" v-else>
          <img src="../../assets/images/titleTwo.png" />
        </div>
      </div>

      <!-- 主题切换 -->
      <div class="theme-select" v-show="showMenu !== 'xy'">
        <img @click="themeSelectClick('dark', 'map1')" :class="{ select: themeMap === 'map1' }" src="../../assets/images/map_1.png" alt="" />
        <img @click="themeSelectClick('light', 'map2')" :class="{ select: themeMap === 'map2' }" src="../../assets/images/map_2.png" alt="" />
        <img @click="themeSelectClick('', 'map3')" :class="{ select: themeMap === 'map3' }" src="../../assets/images/map_3.png" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
import 'cesium/Build/Cesium/Widgets/widgets.css'
import Vue from 'vue'

import { coor2screen } from './Ctool.js'
import DrawGeometry from '../../utils/map/drawGeometry.js'
import basePopup from '@/components/BmpPopup/basePopup.vue'
import UrlTemplateImageryProvider2 from './p.js'
import experdatabase from '@/components/exper_database/index'
import dispatch from '@/components/emergency_dispatch/dispatch'
// import yjzy from '@/components/yjzy/index'
import response from '@/components/emergency_response/index'
import { getStreetList, getVillageList, getResourceList, addAffectedPoint, getAffectedPointList, delAffectedPoint } from '@/api/index'
import zxd1 from '@/assets/layericon/555.png'
import zxd2 from '@/assets/layericon/666.png'

import chartRigth from '@/components/yjzy/chartRight.vue'
import tabLeftBzazd from '@/components/yjzy/leftOne.vue'
import tabLeftFzrlld from '@/components/yjzy/leftTwo.vue'
import tabLeftJydw from '@/components/yjzy/leftThre'
import tabLeftYjwzd from '@/components/yjzy/leftfour'
// 表格
import centerTableTxl from '@/components/yjzy/centerTableOne'
import centerTableZjz from '@/components/yjzy/centerTableTwo'
import { transAddressToCode, longitudeAndLatitudePositioning, wgs2gcj } from '@/utils/map/positioning.js'
// 应急资源点图标
import Bazd from '@/assets/layericon/Bazd.png'
import Bazd2 from '@/assets/layericon/Bazd2.png'
import Bjydw from '@/assets/layericon/Bjydw.png'
import Bjydw2 from '@/assets/layericon/Bjydw2.png'
import Bwzd from '@/assets/layericon/Bwzd.png'
import Bwzd2 from '@/assets/layericon/Bwzd2.png'
import Bxzjd from '@/assets/layericon/Bxzjd.png'
import yjzyAZD from '@/assets/layericon/yjzyAZD.png'
import yjzyLLR from '@/assets/layericon/yjzyLLR.png'
import { mapState } from 'vuex'
import { drawRoutePlan, addRouteLine } from '@/utils/map/routePlan.js'
import { drawBillboardText } from '@/utils/map/drawBillboardText.js'
import { drawDivisionArea, drawRangeDivisionArea, addDivisionImageryProvider } from '@/utils/map/administrativeDivision.js'

const moment = require('moment')
export default {
  name: 'BE2Viewer',
  components: { basePopup,
    experdatabase,
    dispatch,
    chartRigth,
    tabLeftBzazd,
    tabLeftFzrlld,
    tabLeftJydw,
    tabLeftYjwzd,
    centerTableTxl,
    centerTableZjz,
    response },
  props: {
    // 显示的二级菜单名称
    showMenu: {
      type: String,
      default: 'xy'
    }
    // type: {
    //   type: String
    // }
  },
  data () {
    return {
      themeMap: 'map1',
      drawGeometry: '',
      nowDate: '',
      dataStatistics: {
        emergencySuppliesPointTotal: 0,
        settlementPointTotal: 0,
        rescueTeamTotal: 0,
        linkmanPointTotal: 0
      },
      type: 0,
      jydlist: [],
      wzdlist: [],
      bzdlist: [],
      tag2: '',
      tlng2: '',
      tlat2: '',
      Boxselection: 0,
      closeData: 0,
      mapInfo: [],
      maptype: 0,
      popInfo: '',
      pointlist: [],
      routeList: [], // 路线数组
      popbzdlist: [],
      popwzdlist: [],
      szdList: [], // 受灾点数组
      divisionImageryProvider: {
        ready: false
      }, // 行政区域划分的图层
      divsiionEntitiessArr: [], // 行政区域entity数组
      rangeSearchP: null, // 范围搜索的原点
      centerP: [119.982894, 30.546886], // 德清县中心点坐标
      allStreetPickeFeaturesData: [], // 德清县所有街道的行政区域信息
      rangeDivisionEntitiesArr: [], //
      angleFlag: false,
      baseMapLayer: null // 底层图层
    }
  },
  watch: {
    theme: {
      handler: function () {
        let getByIdBox = this.viewer.entities.getById('popup')
        this.viewer.entities.remove(getByIdBox)
        this.addPoints2(this.tag2, this.tlng2, this.tlat2)
      }
    },
    closeData () {
      this.$emit('close')
    },
    showMenu (n) {
      if (n === 'dd') {
        this.getaffectedpointlist()
      } else if (n === 'dd-setting') {
        this.type = 1
      }
    },
    // 监听行政区域划分的图层服务是否准备完成
    'divisionImageryProvider.ready' (value) {
      value && this.getStreetMapFeatures()
    }
  },
  computed: {
    ...mapState(['theme'])
  },
  created () {
    this.getStreetList()

    setInterval(() => {
      this.nowDate = moment(new Date()).format('YYYY/MM/DD HH:mm:ss')
    }, 1000)
    this.getResourceList()
  },
  mounted () {
    this.addCesium1()
    // this.getplan()
  },
  beforeDestroy () {
    this.togEvent(false)
  },
  methods: {
    createPoint (worldPosition) {
      let point = this.viewer.entities.add({
        position: worldPosition,
        point: {
          color: this.Cesium.Color.WHITE,
          pixelSize: 5,
          heightReference: this.Cesium.HeightReference.CLAMP_TO_GROUND
        }
      })
      return point
    },
    close () {
      this.closeData = new Date()
    },
    // 应急调度 范围搜索切换
    switchtab (value) {
      if (value === 1) {
        // 范围搜索 添加点位
        this.getInfoPoint(this.jydlist, 'yjtdJYDW')
        this.getInfoPoint(this.popbzdlist, 'popbzd')
        this.getInfoPoint(this.popwzdlist, 'popwzd')
      } else {
        // 按需搜索
        this.removeapoint()
        // this.clearRoute() // 清除路线
      }
    },
    // 删除旧的路线
    clearRoute () {
      this.routeList.forEach(item => {
        this.viewer.entities.remove(item)
      })
    },
    // 绘制路线
    drawRoute (res) {
      let data = res
      // 显示弹窗
      this.type = 2
      this.clearRoute() // 消除路线
      if (data.rescueTeamList && data.rescueTeamList.length) {
        // 救援队
        data.rescueTeamList.forEach(item => {
          let routeWay = JSON.parse(item.polylineJson)
          let line = addRouteLine(routeWay, this.viewer)
          this.routeList.push(line) // 添加路线实例数组
        })
      }
      if (data.suppliesList && data.suppliesList.length > 0) {
        // 物资点
        data.suppliesList.forEach(item => {
          let routeWay = JSON.parse(item.polylineJson)
          let line = addRouteLine(routeWay, this.viewer)
          this.routeList.push(line) // 添加路线实例数组
        })
      }
      if (data.settlementList && data.settlementList.length > 0) {
        // 避灾点
        data.settlementList.forEach(item => {
          let routeWay = JSON.parse(item.polylineJson)
          let line = addRouteLine(routeWay, this.viewer)
          this.routeList.push(line) // 添加路线实例数组
        })
      }
    },
    // 应急调度 受灾点描点方法
    getaffectedpointlist () {
      getAffectedPointList().then(res => {
        if (res.code === 200) {
          this.pointlist = res.result
          this.getInfoPoint(res.result, 'szd')
        }
      })
    },
    // 获取街道列表
    getStreetList () {
      getStreetList().then(res => {
        if (res.code === 200) {
          const data = res.result || []
          const streeList = [
            {
              id: null,
              streetName: '全部'
            }
          ]
          data.forEach(e => {
            streeList.push(e)
          })
          this.$store.commit('getStreeList', streeList)
        }
      })
      getVillageList().then(res => {
        if (res.code === 200) {
          const data = res.result || []
          const villageList = [
            {
              id: null,
              villageName: '全部'
            }
          ]
          data.forEach(e => {
            villageList.push(e)
          })
          this.$store.commit('getVillageList', villageList)
        }
      })
    },
    // 绘制区域
    drawshape () {
      this.viewer.scene.globe.depthTestAgainstTerrain = true
      this.maptype = 3
      this.Boxselection = this.Boxselection === 0 ? 1 : 0
      if (this.Boxselection === 0) return
      if (!this.drawGeometry) return
      this.drmove()
      this.showwhat = ''
      this.drawGeometry.draw({
        success: res => {
          this.mapInfo = res.paths
          const lon = res.centerPoint.x
          const lat = res.centerPoint.y
          console.log(lon)
          console.log(lat)
          this.addPoints2('popup', lon, lat)
          this.clearShape()
        }
      })
    },
    // 绘制路线
    getplan () {
      const params = {
        startPoint: [119.981861, 30.5469],
        endPoint: [119.98877, 30.544983]
      }
      // 绘制
      drawRoutePlan(this.viewer, {
        // color: '#41D4F3',
        color: '#DC143C',
        width: 14,
        borderStyle: 'dashed',
        ...params
      })
    },
    // 地点名称搜索
    dd (value) {
      this.maptype = 1
      this.dclose()
      transAddressToCode({
        address: value
      })
        .then(res => {
          console.log(res)
          let pos = res.geocodes[0].point
          setTimeout(() => {
            longitudeAndLatitudePositioning(this.viewer, {
              pos
            })
            console.log(pos)
            this.addPoints3('popup', pos[0], pos[1])
          }, 3000)
        })
        .catch(err => {
          console.error(err)
        })
    },
    // 点击调度 --新增受灾点
    showlist (obj) {
      // console.log(this.tlng2, this.tlat2)
      // let point = wgs2gcj([this.tlng2, this.tlat2])
      // console.log(point)
      if (!obj.id) {
        const params = {
          name: obj.name,
          address: obj.address,
          mapCenterX: this.tlng2,
          mapCenterY: this.tlat2,
          peopleCount: obj.peopleCount,
          affectedCount: obj.affectedCount,
          area: obj.area
        }
        if (this.maptype === 3) {
          params.mapInfo = JSON.stringify(this.mapInfo)
        }
        addAffectedPoint(params).then(res => {
          if (res.code === 200) {
            this.$refs.basePopup.close()
            this.$Message.warning('受灾点新增成功')
            if (this.maptype === 3) {
              const getByIdBox = this.viewer.entities.getById('popup')
              this.viewer.entities.remove(getByIdBox)
              this.drawGeometry.removeEntity()
              this.clearShape()
              this.getaffectedpointlist()
            } else {
              this.drmove()
              this.getaffectedpointlist()
            }
          } else {
            this.$Message.warning(res.message)
          }
        })
      } else {
        this.type = 2
      }
    },
    // 消除绘制的区域
    dclose (obj) {
      //   const ids = localStorage.getItem('id')
      this.$refs.basePopup.close()
      if (obj) {
        if (obj.id) {
          const getByIdBox1 = this.viewer.entities.getById('popup' + '-' + obj.id)
          this.viewer.entities.remove(getByIdBox1)

          this.reomvePointRange() // 删除范围搜索内的点
          this.clearRoute() // 清除路线
        } else {
          this.drmove()
        }
        const wz = document.getElementById('zxdwz' + obj.id)
        if (wz) {
          wz.parentNode.removeChild(wz)
        }
        delAffectedPoint({ id: obj.id }).then(res => {
          if (res.code === 200) {
            // this.getaffectedpointlist()
          }
        })
      } else {
        this.drmove()
      }

      this.drawGeometry.removeEntity()
      this.clearShape()
      this.type = 1
      this.Boxselection = 0
    },
    drmove () {
      let getByIdBox = this.viewer.entities.getById('popup')
      this.viewer.entities.remove(getByIdBox)
      // this.popInfo.clear()
    },
    clearShape () {
      this.drawGeometry.clear()
      // this.popInfo.clear()
    },
    // 坐标搜索
    setCoordinatesearch (data) {
      this.maptype = 2
      this.dclose()
      let arr = data.split(',')
      longitudeAndLatitudePositioning(this.viewer, {
        pos: arr
      }).then(res => {
        this.addPoints3('popup', res[0], res[1])
      })
    },
    // 获取所有德清县街道的地图信息
    getStreetMapFeatures () {
      const Cesium = this.Cesium
      const pickFeaturesLayerId = 2 // 查询图层服务的图层id   3：街道   2:镇
      //   const viewer = this.viewer
      const imageryProvider = this.divisionImageryProvider
      const cartesian = Cesium.Cartesian3.fromDegrees(this.centerP[0], this.centerP[1])
      if (!cartesian) return
      let cartographic = Cesium.Cartographic.fromCartesian(cartesian)
      if (!cartographic) return
      let xy = new Cesium.Cartesian2()
      let level = 1
      if (imageryProvider.ready) {
        xy = imageryProvider.tilingScheme.positionToTileXY(cartographic, level, xy)
        let promise = imageryProvider.pickFeatures(xy.x, xy.y, level, cartographic.longitude, cartographic.latitude)
        Cesium.when(promise, data => {
          if (data && data.length) {
            let allStreetPickeFeaturesData = []
            for (let i = 0; i < data.length; i++) {
              const item = data[i]
              if (item.data.layerId === pickFeaturesLayerId && item.data.geometry) {
                allStreetPickeFeaturesData.push(item)
              }
            }
            this.allStreetPickeFeaturesData = allStreetPickeFeaturesData
          }
        })
      }
    },
    addCesium1 () {
      const Cesium = this.Cesium
      Cesium.Ion.defaultAccessToken =
        'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJjZmRjZmU4MC0yY2UzLTRiMDctYmM2Yi0wYWZjMjk1MzgyMDgiLCJpZCI6MzIxODksInNjb3BlcyI6WyJhc2wiLCJhc3IiLCJhc3ciLCJnYyIsInByIl0sImlhdCI6MTU5NjYxMjIzNX0.4-SVt2btVzbIXN3mdxsLbS04uTFrm3vqfeZ7lilXCC4'
      // var cgs2000Ellipsolid = new Cesium.Ellipsoid(6378137.0, 6378137.0, 6356752.31414035585)
      // var myGeographicTilingScheme = new Cesium.GeographicTilingScheme({
      //   // ellipsoid: cgs2000Ellipsolid,
      //   rectangle: Cesium.Rectangle.fromDegrees(-180, -90, 180, 90),
      //   numberOfLevelZeroTilesX: 2,
      //   numberOfLevelZeroTilesY: 1
      // })
      // // Cesium.UrlTemplateImageryProvider
      // const l1 = new UrlTemplateImageryProvider2({
      //   url: 'http://47.110.136.28/arcgisrest/slzt_blue-20180423-arcgisrest/8247edcf-642b-4e2d-86a0-c5542e6e3154',
      //   // url: 'http://47.110.136.28/arcgisrest/德清影像-20191130-arcgisrest/8247edcf-642b-4e2d-86a0-c5542e6e3154/tile/{z}/{y}/{x}',
      //   tilingScheme: myGeographicTilingScheme,
      //   minimumLevel: 0,
      //   show: true
      // })
      //   var viewer = new Cesium.Viewer('cesiumContainer', {
      //    terrainProvider: Cesium.createWorldTerrain(),
      //  }
      let viewer = new Cesium.Viewer('cesiumContainer', {
        baseLayerPicker: true, // 图层选择器
        animation: false, // 左下角仪表
        fullscreenButton: false, // 全屏按钮
        geocoder: false, // 右上角查询搜索
        infoBox: false, // 信息框
        homeButton: false, // home按钮
        sceneModePicker: true, // 3d 2d选择器
        selectionIndicator: false, //
        timeline: false, // 时间轴
        navigationHelpButton: false, // 右上角帮助按钮
        contextOptions: {
          // 截图需要的
          webgl: {
            alpha: true,
            depth: true,
            stencil: true,
            antialias: true,
            premultipliedAlpha: true,
            // 通过canvas.toDataURL()实现截图需要将该项设置为true
            preserveDrawingBuffer: true,
            failIfMajorPerformanceCaveat: true
          }
        },
        terrainProvider: Cesium.createWorldTerrain()
      })
      viewer.cesiumWidget.creditContainer.style.display = 'none'
      viewer.scene.globe.depthTestAgainstTerrain = false
      const { scene } = viewer
      // viewer.imageryLayers.addImageryProvider(l1)
      // viewer.imageryLayers.addImageryProvider(
      //   new Cesium.WebMapTileServiceImageryProvider({
      //     url:
      //       'http://t0.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=11ef9953a469088473fdc096d480544a',
      //     layer: 'tdtImgAnnoLayer',
      //     style: 'default',
      //     format: 'image/jpeg',
      //     tileMatrixSetID: 'GoogleMapsCompatible',
      //     show: false
      //   })
      // ) // 注记图层
      // 地图场景最大缩放层级,即地图最小允许展示的颗粒度
      scene.screenSpaceCameraController.minimumZoomDistance = 50
      // 地图场景最小缩放层级,即地图最大允许展示的颗粒度
      scene.screenSpaceCameraController.maximumZoomDistance = 200000000
      // 设置相机视角 --FLY
      // 119.982894,30.546886
      scene.camera.flyTo({
        duration: 2, // 飞的过渡动画时间
        destination: Cesium.Cartesian3.fromDegrees(
          this.centerP[0], // 地图经度
          this.centerP[1], // 地图维度
          10000 // 地图高度
        )
      })
      // 设置相机视角 --Jump
      viewer.camera.setView({
        destination: Cesium.Cartesian3.fromDegrees(111.07, 39.05, 10000),
        orientation: {
          heading: Cesium.Math.toRadians(0),
          pitch: Cesium.Math.toRadians(-90),
          roll: Cesium.Math.toRadians(0)
        }
      })

      // 亮度设置
      const stages = viewer.scene.postProcessStages
      viewer.scene.brightness = viewer.scene.brightness || stages.add(Cesium.PostProcessStageLibrary.createBrightnessStage())
      viewer.scene.brightness.enabled = true
      viewer.scene.brightness.uniforms.brightness = Number(1.2) // 1比原图稍暗,数字越小越暗
      Vue.prototype.viewer = viewer
      Vue.prototype.scene = scene
      this.changeBaseMap()
      this.$nextTick(() => {
        this.togEvent(true)
        const drawGeometry = new DrawGeometry(viewer)
        this.drawGeometry = drawGeometry
        this.divisionImageryProvider = addDivisionImageryProvider(viewer)
      })
    },
    addCesium2 () {
      /* eslint no-new: */
      const Cesium = window.Cesium
      let viewer = Cesium.DTGlobeViewer.createViewer(Cesium, 'cesiumContainer', false)
      // var cgs2000Ellipsolid = new Cesium.Ellipsoid(6378137.0, 6378137.0, 6356752.31414035585)
      let myGeographicTilingScheme = new Cesium.GeographicTilingScheme({
        // ellipsoid: cgs2000Ellipsolid,
        rectangle: Cesium.Rectangle.fromDegrees(-180, -90, 180, 90),
        numberOfLevelZeroTilesX: 2,
        numberOfLevelZeroTilesY: 1
      })
      // Cesium.UrlTemplateImageryProvider
      const l1 = new UrlTemplateImageryProvider2({
        url: 'http://47.110.136.28/arcgisrest/德清影像-20191130-arcgisrest/8247edcf-642b-4e2d-86a0-c5542e6e3154/tile/{z}/{y}/{x}',
        tilingScheme: myGeographicTilingScheme,
        minimumLevel: 0,
        show: true
      })
      const { scene } = viewer
      // new Cesium.DTLayerControl({ viewer })
      Cesium.Resource.fetchJson({
        url:
          'http://10.214.33.171:8280/dtserver-0.0.1/DTServer/Scene/BrowsingPublicScene/?id=2UTAR01R3P8U0/正元&token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJhdWQiOiLmraPlhYMiLCJleHAiOjE2MTQ4NzM2MDAsImlhdCI6MTU5NjgwNTE2OH0.mLtCYb6vu8Q26hwaoDOLUNq5l0-6afR0ySbgkyqUONE'
      }).then(data => {
        viewer.DTScene.importDTCzml(data)
      })
      viewer.imageryLayers.addImageryProvider(l1)

      viewer.imageryLayers.addImageryProvider(
        new Cesium.WebMapTileServiceImageryProvider({
          url:
            'http://t0.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=11ef9953a469088473fdc096d480544a',
          layer: 'tdtImgAnnoLayer',
          style: 'default',
          format: 'image/jpeg',
          tileMatrixSetID: 'GoogleMapsCompatible',
          show: false
        })
      ) // 注记图层
      scene.camera.flyTo({
        duration: 2, // 飞的过渡动画时间
        destination: Cesium.Cartesian3.fromDegrees(
          119.982894, // 地图经度
          30.546886, // 地图维度
          10000 // 地图高度
        )
      })
      Vue.prototype.viewer = viewer
      Vue.prototype.scene = scene
      this.$nextTick(() => {
        this.togEvent(true)
      })
    },
    // points [{lat维度 lng经度 img图片 }]  添加点的数据  tag图层的标识
    addPoints (points, tag, firstTag) {
      if (!this.layers) {
        this.layers = {}
      }
      // 限制同一个图层不允许再次添加
      if (!this.layers[firstTag]) {
        this.layers[firstTag] = {}
      }
      // if (this.layers[firstTag][tag]) {
      //   return
      // }
      const viewer = this.viewer
      const Cesium = this.Cesium
      const entities = []
      for (const i in points) {
        const entity = viewer.entities.add({
          position: Cesium.Cartesian3.fromDegrees(points[i].lng, points[i].lat),
          id: tag + '-' + points[i].id,
          attributes: {
            tag: tag,
            firstTag: firstTag,
            ...points[i]
          },
          billboard: {
            show: true,
            image: points[i].img,
            pixelOffset: new Cesium.Cartesian2(0, 0),
            eyeOffset: new Cesium.Cartesian3(0.0, 0.0, 0.0),
            horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
            // width: 120,
            // height: 140,
            disableDepthTestDistance: Number.POSITIVE_INFINITY
          }
        })
        entities.push(entity)
      }
      this.layers[firstTag][tag] = entities
    },
    // points [{lat维度 lng经度 img图片 }]  添加点的数据  tag图层的标识
    addPoints4 (points, tag, firstTag, zIndex = 1000) {
      if (!this.layers) {
        this.layers = {}
      }
      // 限制同一个图层不允许再次添加
      if (!this.layers[firstTag]) {
        this.layers[firstTag] = {}
      }
      // if (this.layers[firstTag][tag]) {
      //   return
      // }
      const viewer = this.viewer
      const Cesium = this.Cesium
      const entities = []
      for (const i in points) {
        const entity = viewer.entities.add({
          position: Cesium.Cartesian3.fromDegrees(points[i].lng, points[i].lat),
          id: tag + '-' + points[i].id,
          attributes: {
            tag: tag,
            firstTag: firstTag,
            ...points[i]
          },
          billboard: {
            show: true,
            image: points[i].img,
            pixelOffset: new Cesium.Cartesian2(0, 0),
            eyeOffset: new Cesium.Cartesian3(0.0, 0.0, 0.0),
            horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
            // width: 120,
            // height: 140,
            disableDepthTestDistance: Number.POSITIVE_INFINITY,
            zIndex: zIndex,
            disableDepthTestDistance: zIndex * 10
          }
        })
        entities.push(entity)
      }
      this.layers[firstTag][tag] = entities
    },
    // 清除点位
    removeapoint () {
      // const name1 = 'yjtdJYDW'
      const name2 = 'yjzyWZD'
      const name3 = 'yjzyAZD'
      const name4 = 'yjzyXZJD'
      // const name5 = 'popbzd'
      // const name6 = 'popwzd'
      // this.removePoint(name1, this.jydlist)
      this.removePoint(name2, this.wzdlist)
      this.removePoint(name3, this.bzdlist)
      this.removePoint(name4, this.bzdlist)

      // this.removePoint(name5, this.popbzdlist)
      // this.removePoint(name6, this.popwzdlist)
    },
    // 应急调度 列表变化清楚之前的点位
    reomvePointRange () {
      const name1 = 'yjtdJYDW'
      const name5 = 'popbzd'
      const name6 = 'popwzd'
      this.removePoint(name1, this.jydlist)
      this.removePoint(name5, this.popbzdlist)
      this.removePoint(name6, this.popwzdlist)
      this.clearRoute()
    },
    addPoints2 (tag, lng, lat) {
      this.tag2 = tag
      this.tlng2 = lng
      this.tlat2 = lat
      let img = ''
      if (this.theme === 'dark') {
        img = zxd2
      } else {
        img = zxd1
      }
      const viewer = this.viewer
      const Cesium = this.Cesium
      Cesium.Color.RED = 'red'

      viewer.entities.add({
        position: Cesium.Cartesian3.fromDegrees(lng, lat),
        // point: {
        //   show: true,
        //   color: new Cesium.Color(255, 90, 102, 1), // 点位颜色
        //   pixelSize: 30 // 像素点大小
        // }
        id: tag,
        attributes: {
          tag: tag,
          type: 3
          //   firstTag: firstTag,
          //   ...points[i]
        },
        billboard: {
          show: true,
          image: img,
          pixelOffset: new Cesium.Cartesian2(0, 0),
          // eyeOffset: new Cesium.Cartesian3(0.0, 0.0, 0.0),
          horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
          // width: 120,
          //   height: 80,
          disableDepthTestDistance: Number.POSITIVE_INFINITY
        }
      })
      // viewer.zoomTo(this.viewer.entities)
    },
    // points [{lat维度 lng经度 img图片 }]  添加点的数据  tag图层的标识
    addPoints3 (tag, lng, lat) {
      console.log('3')
      this.tag2 = tag
      this.tlng2 = lng
      this.tlat2 = lat
      let img = ''

      if (this.theme === 'dark') {
        img = zxd2
      } else {
        img = zxd1
      }
      const viewer = this.viewer
      const Cesium = this.Cesium
      Cesium.Color.RED = 'red'
      viewer.entities.add({
        position: Cesium.Cartesian3.fromDegrees(lng, lat),
        // point: {
        //   show: true,
        //   color: new Cesium.Color(255, 90, 102, 1), // 点位颜色
        //   pixelSize: 30 // 像素点大小
        // }
        id: tag,
        attributes: {
          tag: tag,
          type: 3
          // firstTag: firstTag,
          // ...points[i]
        },
        billboard: {
          show: true,
          image: img,
          pixelOffset: new Cesium.Cartesian2(0, 0),
          // eyeOffset: new Cesium.Cartesian3(0.0, 0.0, 0.0),
          horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
          // width: 120,
          // height: 140,
          disableDepthTestDistance: Number.POSITIVE_INFINITY
        }
      })
    },
    // 删除点数据
    removePoint (tag, len) {
      this.viewer.entities.remove(tag)
      if (len) {
        for (let i = 0; i < len.length; i++) {
          const radar = this.viewer.entities.getById(tag + '-' + len[i].id)
          this.viewer.entities.remove(radar)
        }
      }
    },
    // 删除文字
    removeText () {
      let list = this.szdList
      for (let i = 0; i < list.length; i++) {
        const wz = document.getElementById('zxdwz' + list[i].id)
        if (wz) {
          wz.parentNode.removeChild(wz)
        }
      }
    },
    // 删除点数据
    removePoint2 (tag, len) {
      this.viewer.entities.remove(tag)
      console.log(tag, len)
      if (len) {
        for (let i = 0; i < len.length; i++) {
          const radar = this.viewer.entities.getById(tag + '-' + len[i].id)
          this.viewer.entities.remove(radar)
          const wz = document.getElementById('zxdwz' + len[i].id)
          if (wz) {
            wz.parentNode.removeChild(wz)
          }
        }
      }
    },
    // 更换地图点图片
    addPoints5 (obj) {
      this.tag2 = obj.tag
      this.tlng2 = obj.lng
      this.tlat2 = obj.lat
      let img = ''
      const tag = obj.tag
      if (tag === 'popbzd') {
        img = Bazd2
      } else if (tag === 'yjtdJYDW' || tag === 'yjzyJYDW') {
        img = Bjydw2
      } else if (tag === 'popwzd') {
        img = Bwzd2
      } else if (tag === 'yjzyAZD') {
        img = yjzyAZD
      } else if (tag === 'yjzyWZD') {
        img = Bwzd2
      } else if (tag === 'yjzyXZJD') {
        img = yjzyLLR
      } else if (tag === 'yjzyWZD') {
        img = Bjydw2
      }
      const viewer = this.viewer
      const Cesium = this.Cesium
      viewer.entities.add({
        position: Cesium.Cartesian3.fromDegrees(obj.x, obj.y),
        id: 'popgl',
        attributes: {
          tag: tag,
          type: 3,
          firstTag: obj.firstTag,
          ...obj
        },
        billboard: {
          show: true,
          image: img,
          pixelOffset: new Cesium.Cartesian2(0, 0),
          eyeOffset: new Cesium.Cartesian3(0.0, 0.0, 0.0),
          horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
          // width: 120,
          // height: 140,
          disableDepthTestDistance: Number.POSITIVE_INFINITY
        }
      })
    },
    // 图层的显隐 如果没有图层的话就返回false
    togShowLayer (status, tag, firstTag) {
      if (this.layers && this.layers[firstTag] && this.layers[firstTag][tag]) {
        if (!status && this.popupPoint && this.popupPoint.tag === tag && this.popupPoint.firstTag === firstTag) {
          this.showPopup(false)
        }
        const items = this.layers[firstTag][tag]
        for (const i in items) {
          items[i]._show = status
        }
        return true
      } else {
        return false
      }
    },
    // 事件的监听
    togEvent (type) {
      this.screenSpaceEventHandler = this.screenSpaceEventHandler && this.screenSpaceEventHandler.destroy()
      this.removeHandler = this.removeHandler && this.removeHandler()
      if (type) {
        const Cesium = this.Cesium
        const scene = this.scene
        this.screenSpaceEventHandler = new Cesium.ScreenSpaceEventHandler(scene.canvas)
        this.screenSpaceEventHandler.setInputAction(this.mouseClick, Cesium.ScreenSpaceEventType.LEFT_CLICK)
        this.removeHandler = scene.postRender.addEventListener(this.updatePopup)
      }
    },
    // 范围搜索
    rangeSearch (range) {
      if (!range) return
      if (!this.rangeSearchP) return
      range = +range
      this.clearAllDivisionShape()
      this.rangeDivisionEntitiesArr = drawRangeDivisionArea(this.viewer, {
        center: this.rangeSearchP,
        distance: range,
        allStreetPickeFeaturesData: this.allStreetPickeFeaturesData
      })
    },
    // 鼠标点击事件的监听
    mouseClick (movement) {
      const Cesium = this.Cesium
      const scene = this.scene
      const viewer = this.viewer
      let starBurstState = {
        enabled: false,
        pickedEntities: undefined,
        billboardEyeOffsets: undefined,
        labelEyeOffsets: undefined,
        linePrimitive: undefined,
        radius: undefined,
        center: undefined,
        pixelPadding: 10.0,
        angleStart: 0.0,
        angleEnd: Cesium.Math.PI,
        maxDimension: undefined
      }
      if (Cesium.defined(starBurstState.pickedEntities)) {
        return
      }
      let pickedObjects = scene.drillPick(movement.position)
      // 大于0取第一个 等于0关闭
      if (pickedObjects.length > 0) {
        this.showPopup(pickedObjects[0].id._position._value, pickedObjects[0].id._attributes)
        const ray = viewer.camera.getPickRay(movement.position) // 从相机位置到 windowPosition 处的像素创建光线在世界坐标系中。
        this.rangeSearchP = viewer.scene.globe.pick(ray, viewer.scene)
        this.drawDivisionShape(movement.position)
      } else {
        this.showPopup(false)
      }
      this.clearAllDivisionShape()
    },
    clearAllDivisionShape () {
      this.divsiionEntitiessArr.forEach(item => {
        this.viewer.entities.remove(item)
      })
      this.rangeDivisionEntitiesArr.forEach(item => {
        this.viewer.entities.remove(item)
      })
    },
    drawDivisionShape (point) {
      console.log(point)
      //   const Cesium = this.Cesium
      const viewer = this.viewer
      //   const imageryProvider = this.divisionImageryProvider
      const ray = viewer.camera.getPickRay(point) // 从相机位置到 windowPosition 处的像素创建光线在世界坐标系中。
      const cartesian = viewer.scene.globe.pick(ray, viewer.scene)
      console.log(cartesian)
      if (cartesian) {
        drawDivisionArea(viewer, this.divisionImageryProvider, {
          point: cartesian,
          success: entities => {
            this.divsiionEntitiessArr = entities
          }
        })
      }
    },
    // 更新popup的位置
    updatePopup () {
      const point = this.popupPoint
      if (!point) {
        return
      }
      const Cesium = this.Cesium
      const scene = this.scene
      const screenPoint = coor2screen(Cesium, scene, point.point)
      this.$refs.basePopup.update(screenPoint)
    },
    // 展示 popup
    showPopup (point, attributes) {
      const Cesium = this.Cesium
      const scene = this.scene
      if (!point) {
        // 关闭所有的弹窗
        this.popupPoint = null
        this.$refs.basePopup.close()
      } else {
        this.popupPoint = { point,
          tag: attributes.tag,
          firstTag: attributes.firstTag }
        // 打开弹窗
        const screenPoint = coor2screen(Cesium, scene, point)
        if (attributes.lng && attributes.lat) {
          // 把视图移到中心
          let angle = ''
          let lat = ''
          if (!this.angleFlag) {
            angle = {}
            lat = attributes.lat
          } else {
            angle = {
              heading: this.Cesium.Math.toRadians(0),
              pitch: this.Cesium.Math.toRadians(-30),
              roll: this.Cesium.Math.toRadians(0)
            }
            lat = attributes.lat - 0.15
          }
          this.viewer.scene.camera.flyTo({
            duration: 0.5, // 飞的过渡动画时间
            destination: Cesium.Cartesian3.fromDegrees(
              attributes.lng, // 地图经度
              lat, // 地图维度
              10000 // 地图高度
            ),
            orientation: angle
          })
        }
        if (attributes.tag !== 'popup') {
          this.updataPoint(attributes)
        }
        this.$refs.basePopup.open(screenPoint, attributes)
        // console.log(attributes)
      }
    },
    // 双击行
    trdblclick (item) {
      let cartesianPos = this.Cesium.Cartesian3.fromDegrees(+item.x, +item.y)
      this.showPopup(cartesianPos, { ...item })
    },
    // 更换地图点图片
    updataPoint (obj) {
      console.log(obj)
      let nameArry = ['popbzd', 'yjtdJYDW', 'popwzd', 'yjzyAZD', 'yjzyXZJD', 'yjzyJYDW', 'yjzyWZD']
      // let nameArry = ['popbzd', 'yjtdJYDW', 'popwzd']
      for (let i = 0; i < nameArry.length; i++) {
        let list = this.layers[obj.firstTag][nameArry[i]]
        if (!list || list === 'undefined') continue
        list.forEach(item => {
          item.show = true
        })
      }
      const getbyboxid1 = this.viewer.entities.getById('popgl')
      if (getbyboxid1) {
        this.viewer.entities.remove(getbyboxid1)
      }
      const list = this.layers[obj.firstTag][obj.tag]

      list.forEach(item => {
        if (item.id === obj.tag + '-' + obj.id) {
          item.show = false
          this.addPoints5(obj)
        } else {
          item.show = true
        }
      })
    },
    changeBaseMap (type = 'default') {
      // 切换图层主题服务
      let viewer = this.viewer
      let Cesium = this.Cesium
      this.baseMapLayer && viewer.imageryLayers.remove(this.baseMapLayer)
      let url =
        {
          dark: 'http://47.110.136.28//arcgisrest/zhihuichengguan_diziditu-20200724-arcgisrest/8247edcf-642b-4e2d-86a0-c5542e6e3154/tile/{z}/{y}/{x}',
          light: 'http://47.110.136.28//arcgisrest/%E5%BE%B7%E6%B8%85%E5%BA%95%E5%9B%BE%E6%99%AE%E9%80%9A%E7%89%88-22000101-arcgisrest/8247edcf-642b-4e2d-86a0-c5542e6e3154/tile/{z}/{y}/{x}'
        }[type] || 'http://47.110.136.28/arcgisrest/%E5%BE%B7%E6%B8%85%E5%BD%B1%E5%83%8F-20191130-arcgisrest/8247edcf-642b-4e2d-86a0-c5542e6e3154/tile/{z}/{y}/{x}'
      let myGeographicTilingScheme = new Cesium.GeographicTilingScheme({
        rectangle: Cesium.Rectangle.fromDegrees(-180, -90, 180, 90),
        numberOfLevelZeroTilesX: 2,
        numberOfLevelZeroTilesY: 1
      })
      const t1 = new UrlTemplateImageryProvider2({
        url,
        tilingScheme: myGeographicTilingScheme,
        minimumLevel: 0,
        show: true
      })
      if (type === 'light') {
        t1.defaultContrast = 0.6
      }
      const imageryLayers = viewer.imageryLayers
      this.baseMapLayer = new Cesium.ImageryLayer(t1)
      if (type === 'light') {
        this.baseMapLayer.alpha = 0.8
      }
      imageryLayers.add(this.baseMapLayer, 1)
    },
    // 主题切换（地图切换）
    themeSelectClick (theme, map) {
      if (this.showMenu == 'dd') {
        this.getaffectedpointlist()
      }
      this.changeBaseMap(theme)
      if (theme !== '') {
        this.$store.commit('changetheme', theme)
        this.themeMap = map
        this.angleFlag = false
        this.viewer.scene.camera.flyTo({
          duration: 2, // 飞的过渡动画时间
          destination: this.Cesium.Cartesian3.fromDegrees(
            this.centerP[0], // 地图经度
            this.centerP[1], // 地图维度
            10000 // 地图高度
          )
        })
        console.log(this.viewer.scene.mode, '模式1')
      } else {
        this.themeMap = map
        this.angleFlag = true
        this.viewer.scene.camera.flyTo({
          duration: 2, // 飞的过渡动画时间
          destination: this.Cesium.Cartesian3.fromDegrees(this.centerP[0], this.centerP[1] - 0.12, 10000),
          orientation: {
            heading: this.Cesium.Math.toRadians(0.0),
            pitch: this.Cesium.Math.toRadians(-30.0),
            roll: 0.0
          }
        })
      }
    },
    // 获取统计
    getResourceList () {
      getResourceList().then(res => {
        this.dataStatistics = res.result
      })
    },
    // 描点方法
    getInfoPoint (data, name) {
      let defaultCssText = ''
      let pointIMg
      switch (name) {
      case 'yjzyAZD':
        pointIMg = Bazd
        break
      case 'yjzyXZJD':
        pointIMg = Bxzjd
        break
      case 'yjzyJYDW':
        pointIMg = Bjydw
        break
      case 'yjtdJYDW':
        pointIMg = Bjydw
        break
      case 'yjzyWZD':
        pointIMg = Bwzd
        break
      case 'popbzd':
        pointIMg = Bazd
        break
      case 'popwzd':
        pointIMg = Bwzd
        break
      default:
        // pointIMg = zxd
        break
      }
      // 受灾点特殊逻辑处理
      if (name === 'szd') {
        data.forEach(item => {
          item.x = item.mapCenterX
          item.y = item.mapCenterY
        })

        if (this.theme === 'dark') {
          defaultCssText = ` position: absolute;
      z-index: 9;
      display: block;
      position: absolute;
      min-width: 100px;
      max-width: 200px;
      height: auto;
      padding: 10px;
      background-color: rgb(0, 12, 13);
      border: 2px solid rgb(0, 104, 136);
      border-radius: 6px;
      font-size: 14px;
      color: #6BEBED;
      word-break: break-all;
      text-align: center;`
          pointIMg = zxd2
        } else {
          defaultCssText = ` position: absolute;
      z-index: 9;
      display: block;
      position: absolute;
      min-width: 100px;
      max-width: 200px;
      height: auto;
      padding: 10px;
      background-color: rgb(0, 12, 13);
      border: 2px solid rgb(253, 79, 78);
      border-radius: 6px;
      font-size: 14px;
      color: #FD274E;
      word-break: break-all;
      text-align: center;`
          pointIMg = zxd1
        }
      }
      const arr = []
      const arr2 = []
      const arr3 = []
      data.forEach(e => {
        if (arr.indexOf(e.x) === -1 && arr2.indexOf(e.y) === -1) {
          arr.push(e.x)
          arr2.push(e.y)
          arr3.push(e)
        }
      })
      const points = arr3.map(item => {
        return {
          ...item,
          lat: item.y,
          lng: item.x,
          img: pointIMg
        }
      })
      // const points = data.map(item => {
      //   return {
      //     ...item,
      //     lat: item.y,
      //     lng: item.x,
      //     img: pointIMg
      //   }
      // })
      if (name === 'yjtdJYDW') {
        this.jydlist = points
      } else if (name === 'yjzyWZD') {
        this.wzdlist = points
      }
      if (name === 'yjzyAZD') {
        this.bzdlist = points
      }
      if (name === 'popbzd') {
        this.popbzdlist = points
      }
      if (name === 'popwzd') {
        this.popwzdlist = points
      }
      this.removeapoint()
      if (name === 'szd') {
        this.szdList = points // 全局受灾点列表
        this.removePoint2('popup', points)
        points.forEach(item => {
          this.popInfo = drawBillboardText(this.viewer, {
            id: `zxdwz${item.id}`,
            class: 'zxdwz',
            text: item.name,
            point: [item.mapCenterX, item.mapCenterY],
            defaultCssText: defaultCssText,
            offsetTop: 190
          })
        })
        this.addPoints4(points, 'popup', 'popup', 10000)
      } else if (name === 'popbzd') {
        this.removePoint2(name, points)
        this.addPoints4(points, name, 'popup')
      } else if (name === 'popwzd') {
        this.removePoint2(name, points)
        this.addPoints4(points, name, 'popup')
      } else if (name === 'yjtdJYDW') {
        this.removePoint2(name, points)
        this.addPoints4(points, name, 'popup')
      } else {
        this.removePoint2(name, this.poindlist)
        this.addPoints(points, name, 'yjzy')
      }
      this.poindlist = points
    }
  }
}
</script>
<style scoped></style>
<style scoped lang="scss">
#cesiumContainer {
  width: 100%;
  height: 100%;
  z-index: 999;
}

.searchNav {
  width: 370px;
  display: flex;
  align-items: center;
  z-index: 11;
  position: absolute;
  left: 50%;
  top: -8px;
  transform: translateX(-50%);
  .titleInfo {
    display: inline-block;
    text-align: center;
    img {
      width: 370px;
    }
  }
  .titleInfoTwo {
    position: absolute;
    left: 50%;
    top: 19px;
    transform: translateX(-50%);
    display: inline-block;
    text-align: center;
    width: 300px;
    // height:30px;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
.container {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  padding: 1;
  display: flex;
  justify-content: space-between;
  .leftInfo {
    z-index: 9999999;
    .overseasAffairs {
      padding-left: 0%;
    }
  }
  .rightInfo {
    margin-left: auto;
    z-index: 9999;
    width: 300px;
    .topInfo {
      display: flex;
    }
    .base {
      height: 60vh;
      width: 15vw;
    }
    .parties {
      margin-left: 10px;
      height: 60vh;
      width: 15vw;
    }
    .example {
      margin-top: 40px;
      // height: 240px;
      width: 33vw;
      // background-image: url('~@/assets/images/example.png');
      // background-size: 100% 100%;
    }
  }
  .centerInfo {
    width: 100%;
    height: 100%;
    z-index: 99;
    @include themify($themes) {
      background-image: themed('yjxy_bg');
      background-position: 0 -25px;
    }
    // background-image: url('~@/assets/images/example.png');
    // background-size: 100% 100%;
    .info {
      width: 90%;
      height: 90%;
      display: flex;
      justify-items: center;
      align-items: center;
    }
  }

  .theme-select {
    z-index: 9;
    position: absolute;
    height: 9%;
    width: 20%;
    bottom: 0;
    margin: 1% auto;
    margin-left: 1%;
    text-align: center;

    img {
      // border: 2px solid #ffffff;
      margin: 2px;
    }

    .select {
      border: 2px solid #027aff;
      background-color: aqua;
    }
  }
  @media screen and (max-width: 1880px) {
    .theme-select {
      display: none;
    }
  }

  .date {
    z-index: 999;
    position: absolute;
    height: 60px;
    width: 300px;
    top: 0;
    margin-left: 19px;
    // align-items: center;
    // display: flex;
    @include themify($themes) {
      background-image: themed('time_bg');
      background-position: themed('time_bg_position');
    }
    // .icon {
    //   width: 20px;
    //   height: 20px;
    //   background: #42deff;
    //   border-radius: 50%;
    // }
    .content {
      padding-right: 28px;
      box-sizing: border-box;
      width: 100%;
      // height: 50px;
      text-align: right;
      line-height: 50px;
      font-size: 20px;
      font-family: Avenir;
      font-weight: 900;
      opacity: 0.9;
      @include themify($themes) {
        color: themed('time_color');
      }
    }
  }
  .statistics {
    z-index: 999;
    position: absolute;
    height: 75px;
    // width: 17%;
    width: 300px;
    top: 50px;
    // background: #111720;
    box-shadow: 1px 4px 8px 0px rgba(90, 97, 102, 0.5);
    margin-left: 19px;
    @include themify($themes) {
      background-image: themed('tj_bg');
      background-position: themed('times_bg_position');
    }
    display: flex;
    align-items: center;
    justify-content: space-around;

    .item {
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .item-icon {
        // width: 20px;
        height: 38px;
        // background-image: url('../../assets/images/tj_time_light.png');
      }
      .tj_yjwz2 {
        width: 20px;
        height: 20px;
        margin: 12px 0;
      }
      .item-title {
        // width: 22px;
        height: 15px;
        font-size: 20px;
        font-family: Avenir;
        font-weight: 900;
        line-height: 24px;
        @include themify($themes) {
          color: themed('tj_color');
        }
      }
    }
  }
}
.right {
  height: 100vh;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 9999;
}
</style>
